<template>
  <div class="page-vip" >
    <div class="vip-1" to="" :style="icon" v-for="item in types" :key="item._id">
      <!-- <h1>11113</h1> -->
      <div class="box"></div>
      <img class="VIP" :src="'./static/img/VIP/' + item.img" alt="">
      <div class="top">
        <ul class="top1">
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="top2">
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="top3">
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="top4">
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="top5">
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="top6">
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
        </ul>
      </div>
      <div class="bt"></div>
      <div class="kt">
        <p>{{item.title}}</p>
        <p>{{item.title1}}</p>
        <span>{{item.title2}}</span>
      </div>
      <div class="bottom1"></div>
      <div class="bottom2"></div>
      <div class="bottom3"></div>
      <div class="white">
        <ul class="white1">
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="white2">
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="white3">
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="white4">
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="white5">
          <li><span></span></li>
          <li><span></span></li>
        </ul>
        <ul class="white6">
          <li><span></span></li>
          <li><span></span></li>
        </ul>
      </div>
    </div>
    <!-- 顶部图片结束 -->
    <div class="vip-2">
      <div class="box-vip" v-for="item in list" :key="item._id">
        <div class="imgs1" :style="icon2"></div>
        <div class="imgs2" :style="icon2"></div>
        <div class="imgs3" :style="icon2"></div>
        <p>{{item.title}}</p>
        <span>{{item.p}}</span>
      </div>
    </div>
    <!-- 底部开始 -->
    <div class="vip-3" v-for="item in items" :key="item._id">
      <div class="bottom">
        <p class="vip-p1">{{item.title}}</p>
        <p class="vip-p2">{{item.title2}}</p>
        <a href="javascript::">{{item.title3}}</a>
      </div>
      <div class="chart">
        <ul class="chart_line">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="chart_photo" :style="item.chart"></div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.page-vip{
  .vip-1{
    width: 100%;
    height: 667px;
    background: no-repeat;
    overflow: hidden;
    position: relative;
    .box{
      width: 307px;
      height: 135px;
      background: rgba(255,255,255,.4);
      transform:rotate(45deg);
      position: absolute;
      top: 31px;
      left: -31px;
    }
    .VIP{
      width: 189px;
      height:140px;
      // border: solid 1px;
      position: absolute;
      top: 126px;
      left: 100px;
    }
    .top{
      position: absolute;
      width:190px ;
      height: 150px;
      left: 50px;
      top: -10px;
      z-index: 100;
      // border: solid 1px;
      .top1,.top2,.top3,.top4,.top5,.top6{
        width: 16px;
        float: left;
        margin-left: 15px;
        // border: solid 2px;
        span{
          display: block;
          background: #fff;
          border-radius: 50%;
          
        }
      }
      .top1 span{
        width: 13px;
        height: 13px;
        margin-top: 12px;
      }
      .top2 span{
        width: 12px;
        height: 12px;
        margin-top: 13px;
      }
      .top3 span{
        width: 11px;
        height: 11px;
        margin-top: 14px;
      }
      .top4 span{
        width: 10px;
        height: 10px;
        margin-top: 15px;
      }
      .top5 span{
        width: 9px;
        height: 9px;
        margin-top: 16px;
      }
      .top6 span{
        width: 8px;
        height: 8px;
        margin-top: 17px;
      }
    }
    .bt{
      position: absolute;
      left: 21%;
      top: -30px;
      width: 60px;
      height: 134px;
      background-color: #7a7cff;
      border-radius: 30px;
    }
    .kt{
      position: absolute;
      width: 300px;
      height: 280px;
      right: 50%;
      margin-right: -150px;
      bottom: 10%;
      p{
        font-size: 32px;
        color: #FFF3EE;
        font-weight: 400;
        margin-bottom: 8px;
      }
      span{
        position: absolute;
        width: 300px;
        height: 50px;
        margin: 15px auto;
        font-size: 24px;
        line-height: 50px;
        display: block;
        background-color: #f04f43;
        border-radius: 80px;
        color: #FCDDDA;
        text-align: center;
        z-index: 10;
      }
    }
    .bottom1{
      width: 70px;
      height:25px;
      background: #EB5A81;
      border-radius: 15px;
      transform: rotate(45deg);
      position: absolute;
      left: 65px;
      bottom: 18px;
    }
    .bottom2{
      width: 950px;
      height: 880px;
      background: #F4D74F;
      border-radius: 50%;
      position: absolute;
      top: 300px;
      left: 124px;
      z-index: 1;
    }
    .bottom3{
      width: 96px;
      height: 104px;
      border-radius: 44%;
      background: #EF765B;
      position: absolute;
      bottom: -78px;
      right: -78px;
      z-index: 2;
    }
    .white{
      position: absolute;
      width:190px ;
      height: 150px;
      left: 176px;
      bottom: -90px;
      z-index: 100;
      // border: solid 1px;
      .white1,.white2,.white3,.white4,.white5,.white6{
        width: 16px;
        float: left;
        margin-left: 15px;
        // border: solid 2px;
        span{
          display: block;
          background: #fff;
          border-radius: 50%;
          
        }
      }
      .white6 span{
        width: 13px;
        height: 13px;
        margin-top: 12px;
      }
      .white5 span{
        width: 12px;
        height: 12px;
        margin-top: 13px;
      }
      .white4 span{
        width: 11px;
        height: 11px;
        margin-top: 14px;
      }
      .white3 span{
        width: 10px;
        height: 10px;
        margin-top: 15px;
      }
      .white2 span{
        width: 9px;
        height: 9px;
        margin-top: 16px;
      }
      .white1 span{
        width: 8px;
        height: 8px;
        margin-top: 17px;
      }
    }
  }
  // 顶部图片样式结束
  .vip-2{
    width: 375px;
    height: 528px;
    // border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 40px;
    .box-vip{
      width: 187.5px;
      height:132px;
      // border: 1px solid red;
      position: relative;
      text-align: center;
      p{
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform:translateX(-50%);
        // white-space: nowrap;
        font-weight: 600;
        font-size: 15px;
      }
      span{
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform:translateX(-50%);
        white-space: nowrap;
        font-size: 15px;
        color: grey;
      }
      div{
        width: 55px;
        height: 55px;
        // position: relative;
        // border: 1px solid #000;
        background-size: 190px;
        background-repeat: no-repeat;
      }
      &:nth-of-type(1) div{ 
        // width: 55px;
        // height: 55px;
        // border: 1px solid #000;
        // background-size: 190px;
        // background-repeat: no-repeat;
         &:nth-child(1){
          position: absolute;
          top: 35px;
          left: 65px;
          width: 21.5px;
          height: 29px;
          background-position: -160px -93px;
        }
         &:nth-child(2){
          position: absolute;
          top: 31px;
          left: 73px;
          width: 36.5px;
          height:36.5px;
          background-position: -53px -57px;
        }
        &:nth-child(3){
          position: absolute;
          top: 35px;
          left: 97px;
          width: 21.5px;
          height:29px;
          background-position: -159px -63px;
        }
      }
      &:nth-of-type(2) div{ 
        // width: 55px;
        // height: 55px;
        // border: 1px solid #000;
        // background-size: 190px;
        // background-repeat: no-repeat;
          &:nth-child(1){
          position: absolute;
          top: 24px;
          left: 65px;
          width: 55px;
          height: 55px;
          background-position: -1px -1px;
        }
          &:nth-child(2){
          position: absolute;
          top: 24px;
          left: 65px;
          width: 55px;
          height:55px;
          background-position: -58px -1px;
        }
          &:nth-child(3){
          width: 0px;
          height:0px;
          background-position: -53px -57px;
        }
      }
      &:nth-of-type(3) div{ 
        // width: 55px;
        // height: 55px;
        // border: 1px solid #000;
        // background-size: 190px;
        // background-repeat: no-repeat;
          &:nth-child(1){
          position: absolute;
          top: 25px;
          left: 65px;
          width: 43px;
          height: 43px;
          background-position: -114px 0px;
        }
          &:nth-child(2){
          position: absolute;
          top: 21px;
          left: 92px;
          width: 17px;
          height: 28px;
          transform: rotate(20deg);
          background-position: -90px -57px;
        }
        &:nth-child(3){
          width: 0px;
          height:0px;
          background-position: -159px -63px;
        }
      }
      &:nth-of-type(4) div{ 
        // width: 55px;
        // height: 55px;
        // border: 1px solid #000;
        // background-size: 190px;
        // background-repeat: no-repeat;
         &:nth-child(1){
          position: absolute;
          top: 24px;
          left: 75px;
          width: 40px;
          height: 40px;
          background-position: -113px -44px;
        }
         &:nth-child(2){
          position: absolute;
          top: 30px;
          left: 86px;
          width: 20px;
          height:22px;
          // background-color: chartreuse;
          background-position: 0px -161px;
        }
        &:nth-child(3){
          width: 0px;
          height:0px;
          background-position: -159px -63px;
        }
      }
      &:nth-of-type(5) div{ 
        // width: 55px;
        // height: 55px;
        // border: 1px solid #000;
        // background-size: 190px;
        // background-repeat: no-repeat;
         &:nth-child(1){
          position: absolute;
          top: 32px;
          left: 60px;
          width: 13px;
          height: 16px;
          background-position: -42px -161px;
        }
         &:nth-child(2){
          position: absolute;
          top: 24px;
          left: 75px;
          width: 31px;
          height:39px;
          background-position: 0px -95px;
        }
        &:nth-child(3){
          position: absolute;
          top: 32px;
          left: 107px;
          width: 13px;
          height:16px;
          background-position: -175px -136px;
        }
      }
      &:nth-of-type(6) div{ 
        // width: 55px;
        // height: 55px;
        // border: 1px solid #000;
        // background-size: 190px;
        // background-repeat: no-repeat;
         &:nth-child(1){
          position: absolute;
          top: 21px;
          left: 77px;
          width: 31.5px;
          height: 29.5px;
          background-position: -159px 0px;
        }
         &:nth-child(2){
          position: absolute;
          top: 36px;
          left: 72px;
          width: 41.5px;
          height:27px;
          background-position: -32px -97px;
        }
        &:nth-child(3){
          width: 0px;
          height:0px;
          background-position: -159px -63px;
        }
      }
      &:nth-of-type(7) div{ 
        // width: 55px;
        // height: 55px;
        // border: 1px solid #000;
        // background-size: 190px;
        // background-repeat: no-repeat;
         &:nth-child(1){
          position: absolute;
          top: 24px;
          left: 70px;
          width: 51px;
          height: 36.5px;
          background-position: 0px -57px;
        }
         &:nth-child(2){
          position: absolute;
          top: 33px;
          left: 84px;
          width: 20px;
          height:20.5px;
          // background-color: chartreuse;
          background-position: -21px -161px;
        }
        &:nth-child(3){
          width: 0px;
          height:0px;
          background-position: -159px -63px;
        }
      }
    }
  }
  // 底部样式开始
  .vip-3{
    width: 375px;
    height: 344px;
    background-color: #f0f0f0;
    .bottom{
      width: 100%;
      height:139px;
      padding-top: 15px;
      margin-bottom: 40px;
      text-align: center;
      .vip-p1{
        font-size: 22px;
        margin-top: 30px;
      }
      .vip-p2{
        font-size: 12px;
        color: #808080;
        margin-top: 2px;
        margin-bottom: 20px;
      }
      a{
        text-decoration: none;
        display: block;
        font-size: 18px;
        width: 200px;
        height: 40px;
        background: #F04F43;
        border-radius: 20px;
        margin: 0 auto;
        color: cornsilk;
        line-height: 40px;
      }
    }
    .chart{
      width: 100%;
      height:115px;
      .chart_line{
        height: 110px;
        li{
          height: 10px;
          border-bottom: dashed 1px #ddd;
        }
      }
      .chart_photo{
        width: 300px;
        height: 115px;
        background-repeat: no-repeat;
        background-size: contain;
        margin: 0 auto;
        margin-top: -108px;
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      icon: {
        backgroundImage:'url(' + require('../../public/static/img/VIP/vip_main.jpg') + ')'
      },
      types: [
        {id:0, img:'Vip.png',title:'全民K歌VIP',title1:'7天特权尊贵体验', title2:'开通VIP'}
      ],
      list: [
        {id:0, title:'外显特权', p:'红名和尊贵图标'},
        {id:1, title:'财富特权', p:'每日领取更多鲜花'},
        {id:2, title:'音质特权', p:'高品质伴奏和录音'},
        {id:3, title:'下载特权', p:'离线播放、导出作品'},
        {id:4, title:'家族特权', p:'创建家族笼络人气'},
        {id:5, title:'投稿特权', p:'快速增长作品听众'},
        {id:6, title:'上传特权', p:'站外制作站内秀'},
      ],
      icon2: {
        backgroundImage:'url(' + require('../../public/static/img/VIP/vip1.png') + ')',
      },
      items: [
        {id:0, title:'VIP成长体系', title2:'VIP成长速度：10点／天，年费VIP成长速度：15点／天',title3:'开通VIP',
        chart: {
          backgroundImage:'url(' + require('../../public/static/img/VIP/chart.png') + ')',
        }}
      ]
    }
  }
}
</script>